<template>
  <div class="low">
    <div :class="[btn === 0 ? 'low-arrow-up' : 'low-arrow-down']" @click="BigBtn"></div>
    <div v-if="btn === 0" class="low-box">
      <div class="sidebar" @click="SidebarNo"></div>
      <div class="additem" @click="Additem"></div>
      <div class="mymy" @click="MyNo"></div>
    </div>
    <div v-if="btn === 1" class="sidebar-content">
      <div class="up">
        <div class="item" @click="HistoryOn">
          <div class="item-logo logo1"></div>
          <div class="item-text">历史</div>
        </div>
        <div class="item" @click="ListOn">
          <div class="item-logo logo2"></div>
          <div class="item-text">列表</div>
        </div>
        <div class="item" @click="TapOn">
          <div class="item-logo logo3"></div>
          <div class="item-text">颜色标签</div>
        </div>
        <div class="item" @click="RecycleOn">
          <div class="item-logo logo4"></div>
          <div class="item-text">回收站</div>
        </div>
      </div>
      <div class="down">
        <div class="item1" @click="SetOn">
          <div class="item-logo logo5"></div>
          <div class="item-text">设置</div>
        </div>
      </div>
    </div>
    <div v-if="btn === 2" class="additem-content">
      <div class="additem-title-box">
        <div class="additem-input-box">
          <input v-model="titleTemp" class="additem-input" placeholder="请输入内容" />
        </div>
        <div class="additem-input-save" @click="Save"></div>
        <div class="additem-input-time" @click="SetTime"></div>
      </div>
      <div class="additem-body">
        <div class="body-input-box">
          <textarea v-model="contentTemp" class="body-input" placeholder="在这里输入详细内容"></textarea>
        </div>
      </div>
    </div>
    <div v-if="btn === 3" class="additem-mymy">
      <div class="logo-ring1">
        <div class="logo-ring2">
          <div class="logo-ring3">
            <div class="mymy-logo"></div>
          </div>
        </div>
      </div>
      <div class="mymy-text-box">
        <div class="mymy-name">泽枫</div>
        <div class="mymy-text1">服务与协议</div>
        <div class="mymy-text1">用户隐私</div>
        <div class="mymy-text1">清理缓存</div>
        <div class="mymy-text1">登出账号</div>
      </div>
      <div class="card-mask1"></div>
      <div class="card-mask4"></div>
      <div class="mymy-card">
        <div class="card1-ring1">
          <div class="card1-ring2">
            <div class="card1-ring3">
              <div class="card1-ring4"></div>
            </div>
          </div>
        </div>
        <div class="card2-ring1">
          <div class="card2-ring2">
            <div class="card2-ring3">
              <div class="card2-ring4"></div>
            </div>
          </div>
        </div>
        <div class="card-vip">VIP</div>
        <div class="card-text">订阅高级版本</div>
        <div class="card-go"></div>
      </div>
    </div>
  </div>
  <div class="mask4" @click="GoHome"></div>
</template>
<script setup>
import { defineProps, watch, defineEmits, onMounted, ref } from 'vue';

const emit = defineEmits(['tail-return']);
const props = defineProps({
  switch: {
    type: Number,
    default: -1,
  },
});
// 监听 props.switch 的变化
watch(
  () => props.switch,
  (newValue) => {
    if (newValue) {
      Additem();
    }
  },
);

let timeTemp = ref();
let titleTemp = ref('');
let contentTemp = ref('');
let btn = ref(0);

function GoHome() {
  BigBtn();
}
function BigBtn() {
  if (btn.value === 0) {
    Additem();
  } else {
    console.log('关闭');
    btn.value = 0;
    document.querySelector('.low').classList.remove('low-up-mymy');
    document.querySelector('.low').classList.remove('low-up-sidebar');
    titleTemp.value = null;
    contentTemp.value = null;
    MaskOff();
  }
}
function MaskNo() {
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.querySelector('.low').style.backgroundColor = 'rgba(27, 27, 29, 1)';
  }
  document.querySelector('.low').style.zIndex = '11';
  setTimeout(function () {
    document.querySelector('.mask4').style.display = 'block';
    document.querySelector('.mask4').style.zIndex = '9';
  }, 750);
}
function MaskOff() {
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.querySelector('.low').style.backgroundColor = 'rgba(0, 0, 0, 1)';
  }
  document.querySelector('.mask4').style.display = 'none';
  document.querySelector('.mask4').style.zIndex = '0';
  document.querySelector('.low').style.zIndex = '0';
}
function Additem() {
  console.log('添加');
  btn.value = 2;
  document.querySelector('.low').classList.add('low-up-mymy');
  MaskNo();
}
function SidebarNo() {
  console.log('打开侧边栏');
  btn.value = 1;
  document.querySelector('.low').classList.add('low-up-sidebar');
  MaskNo();
}
function MyNo() {
  console.log('打开个人中心');
  btn.value = 3;
  document.querySelector('.low').classList.add('low-up-mymy');
  MaskNo();
}
function HistoryOn() {
  console.log('打开历史');
}
function ListOn() {
  console.log('打开列表');
}
function TapOn() {
  console.log('打开颜色标签');
}
function RecycleOn() {
  console.log('打开回收站');
}
function SetOn() {
  console.log('打开设置');
}
function SetTime() {
  console.log('设置时间');
  timeTemp.value = getFormattedDate();
}
function getFormattedDate() {
  const now = new Date(); // 获取当前日期和时间
  const year = now.getFullYear(); // 年份
  let month = now.getMonth() + 1; // 月份，月份是从0开始的，所以需要+1
  let day = now.getDate(); // 日

  // 月份和日期不足两位数时，前面补0
  month = month < 10 ? '0' + month : month;
  day = day < 10 ? '0' + day : day;

  return `${year}.${month}.${day}`; // 返回格式化后的日期字符串
}
function Save() {
  console.log('保存');
  let data = {
    type: 1,
    item: {
      switch: 0,
      time: timeTemp,
      title: titleTemp.value,
      content: contentTemp.value,
    },
  };

  emit('tail-return', data);
  BigBtn();
}
</script>
<style scoped>
.low {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 91.133%;
  border-radius: 16px 16px 0px 0px;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
  padding-top: 1%;
  background-color: rgb(255, 255, 255);
  transition: all 1s ease;
  transform: translateY(89%);
}
.low-up-sidebar {
  transform: translateY(58%);
}
.low-up-mymy {
  transform: translateY(0%);
}
.low-box {
  position: absolute;
  top: 1.5%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.sidebar {
  width: 15%;
  aspect-ratio: 1;
  cursor: pointer;
  background: url(../../../public/sidebar.svg);
  background-size: 45%;
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中显示 */
  cursor: pointer;
}
.additem {
  width: 17%;
  aspect-ratio: 1;
  cursor: pointer;
  background: url(../../../public/additem.svg);
  background-size: 60%;
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中显示 */
  cursor: pointer;
}
.mymy {
  width: 15%;
  aspect-ratio: 1;
  cursor: pointer;
  background: url(../../../public/mymy.svg);
  background-size: 50%;
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中显示 */
  cursor: pointer;
}
.low-arrow-up {
  margin-left: auto;
  margin-right: auto;
  width: 0;
  height: 0;
  border-left: 20px solid transparent; /* 左边透明 */
  border-right: 20px solid transparent; /* 右边透明 */
  border-bottom: 10px solid rgb(238, 238, 238); /* 上边为黑色实心 */
  cursor: pointer;
}
.low-arrow-down {
  margin-left: auto;
  margin-right: auto;
  width: 0;
  height: 0;
  border-left: 20px solid transparent; /* 左边透明 */
  border-right: 20px solid transparent; /* 右边透明 */
  border-top: 10px solid rgb(238, 238, 238); /* 上边为黑色实心 */
  cursor: pointer;
  z-index: 100;
}
.sidebar-content {
  width: 100%;
  height: 42%;
}
.up {
  width: 100%;
  height: 72%;
}
.item {
  width: 100%;
  height: 25%;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.item1 {
  cursor: pointer;
  width: 100%;
  height: 64%;
  display: flex;
  align-items: center;
}
.item-logo {
  height: 100%;
  aspect-ratio: 1;
}
.logo1 {
  background: url(../../../public/history.svg);
  background-size: 46%;
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中显示 */
}
.logo2 {
  background: url(../../../public/sidebar.svg);
  background-size: 46%;
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中显示 */
}
.logo3 {
  background: url(../../../public/tap.png);
  background-size: 46%;
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中显示 */
}
.logo4 {
  background: url(../../../public/recycle.png);
  background-size: 46%;
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中显示 */
}
.logo5 {
  background: url(../../../public/set.svg);
  background-size: 46%;
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中显示 */
}
.item-text {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 20px;
  color: rgba(0, 0, 0, 1);
  text-align: left;
  vertical-align: top;
}
.down {
  width: 100%;
  height: 28%;
  border: 1px solid rgba(245, 245, 245, 1);
}
.mask4 {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: none;
}
.additem-content {
  width: 100%;
  height: 100%;
}
.additem-title-box {
  width: 100%;
  height: 5%;
  margin-top: 3%;
  display: flex;
}
.additem-input-box {
  width: 80%;
  height: 100%;
  display: flex;
  margin-left: 5%;
}
.additem-input {
  height: 100%;
  width: 100%;
  border: none;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 31.86px;
  color: rgba(0, 0, 0, 0.5);
  vertical-align: top;
}
.additem-input-save {
  height: 100%;
  aspect-ratio: 1;
  background: url(../../../public/save.svg);
  background-size: 70%;
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中显示 */
  cursor: pointer;
}
.additem-input-time {
  height: 100%;
  aspect-ratio: 1;
  background: url(../../../public/time.svg);
  background-size: 70%;
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中显示 */
  cursor: pointer;
}
input {
  outline: none;
}
textarea {
  outline: none;
}
.additem-body {
  width: 100%;
  height: 95%;
  border: 0.5px solid rgba(219, 219, 219, 1);
  padding-top: 2%;
}
.body-input-box {
  width: 100%;
  height: 100%;
  padding-left: 5%;
  padding-right: 5%;
}
.body-input {
  width: 100%;
  height: 100%;
  border: none;
}
.additem-mymy {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
}
.logo-ring1 {
  position: absolute;
  top: 4%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0.5px solid rgba(97, 97, 97, 0.08);
}
.logo-ring2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0.5px solid rgba(97, 97, 97, 0.2);
}
.logo-ring3 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0.5px solid rgba(97, 97, 97, 0.4);
}
.mymy-logo {
  width: 85%;
  aspect-ratio: 1;
  background: url(https://img.js.design/assets/img/5fe5ba8385f6379fa22e3f3b.png);
  background-size: cover;
  border-radius: 50%;
  border: 0.5px solid rgba(97, 97, 97, 1);
}
.mymy-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 31.86px;
  color: rgba(0, 0, 0, 1);
  text-align: center;
  vertical-align: top;
  width: 100%;
  margin-top: 10%;
  margin-bottom: 7%;
  z-index: 5;
}
.mymy-text1 {
  width: 100%;
  margin-top: 30%;
  margin-bottom: 30%;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 20px;
  color: rgba(0, 0, 0, 1);
  text-align: center;
  vertical-align: top;
}
.mymy-text2 {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 20px;
  color: rgba(0, 0, 0, 1);
  text-align: left;
  vertical-align: top;
  z-index: 5;
}
.mymy-text3 {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 20px;
  color: rgba(0, 0, 0, 1);
  text-align: left;
  vertical-align: top;
  z-index: 5;
}
.mymy-card {
  position: absolute;
  width: 90%;
  top: 30%;
  height: 10%;
  border-radius: 8px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 4px 12px -4px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  position: relative;
  border: 1px solid rgba(97, 97, 97, 0.1);
}
.card1-ring1 {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(0, 122, 255, 0.1);
}
.card1-ring2 {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(0, 122, 255, 0.2);
}
.card1-ring3 {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(0, 122, 255, 0.3);
}
.card1-ring4 {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(0, 122, 255, 0.4);
}
.card2-ring1 {
  left: 50%;
  top: -150%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0.5px solid rgba(97, 97, 97, 0.08);
}
.card2-ring2 {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0.5px solid rgba(97, 97, 97, 0.2);
}
.card2-ring3 {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0.5px solid rgba(97, 97, 97, 0.4);
}
.card2-ring4 {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0.5px solid rgba(146, 146, 146, 1);
}
.card-vip {
  margin-left: 8%;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 17.58px;
  color: rgba(0, 118, 255, 1);
  text-align: left;
  vertical-align: top;
}
.card-text {
  margin-left: -25%;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 21.72px;
  color: rgba(0, 122, 255, 1);
  text-align: left;
  vertical-align: top;
}
.card-go {
  height: 100%;
  aspect-ratio: 1;
  background: url(../../../public/goright.svg);
  background-size: 45%;
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中显示 */
}
.card-mask1 {
  position: absolute;
  top: 56.7%;
  width: 100%;
  height: 20%;
  background-color: rgb(255, 255, 255);
  z-index: 1;
}
.card-mask4 {
  position: absolute;
  top: 86.5%;
  width: 100%;
  height: 20%;
  z-index: 1;
  background-color: rgb(255, 255, 255);
}
.mymy-text-box {
  position: absolute;
  top: 30%;
  z-index: 99;
}
@media (prefers-color-scheme: dark) {
  .low {
    background: rgb(0, 0, 0);
  }
  .low * {
    color: rgb(255, 255, 255);
  }
  .low-arrow-up {
    border-bottom: 10px solid rgba(255, 255, 255, 0.1); /* 上边为黑色实心 */
  }
  .low-arrow-down {
    border-top: 10px solid rgba(255, 255, 255, 0.1); /* 上边为黑色实心 */
  }
  .down {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .additem-input {
    background: rgba(27, 27, 29, 1);
  }
  .body-input {
    background: rgba(27, 27, 29, 1);
  }
  .additem-body {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .card-mask1 {
    background: rgba(27, 27, 29, 1);
  }
  .card-mask4 {
    background: rgba(27, 27, 29, 1);
  }
  .card-vip {
    color: rgba(0, 118, 255, 1);
  }
  .card-text {
    color: rgba(0, 122, 255, 1);
  }
  .mymy-card {
    background: rgba(34, 34, 34, 1);
  }
}
</style>
